<template>
	<view class="u-page">
	  <navbar>
		用户管理
		<template #right>
		  <uv-text type="primary" align="right" text="新增" @click="addTech"></uv-text>
		</template>
	  </navbar>
	  <view class="search">
		<uni-easyinput trim="all" v-model="key" placeholder="请输入用户名" />
		<view class="btn" @click="searchUserList">
			搜索
		</view>
	  </view>
	  <view class="panel" style="overflow-x: auto">
		<view class="table">
		  <view class="row header">
			<view class="cell" @click="changesort('id')">ID</view>
			<view class="cell">用户名</view>
			<view class="cell">操作</view>
		  </view>
		  <view class="row body" v-for="(item, index) in list" :key="index">
			<view :class="'cell status2_' + item.is_freeze">{{ item.id }}</view>
			<view class="cell status2_">
			  {{ item.username }}
			</view>
			<view class="edit cell" @click="viewedit(item)"> 修改 </view>
		  </view>
		</view>
		<view class="page">
		  <view class="page-item">
			<pagination :data="pageInfo" @page="changePage"></pagination>
		  </view>
		</view>
	  </view>
	  <uv-popup
		ref="popupRef"
		mode="bottom"
		round="16"
		:closeOnClickOverlay="false"
		:closeable="true"
		@change="maskClick"
	  >
		<view class="popup">
		  <view class="title"> 技师长管理员账号 </view>
		  <uni-forms ref="formRef" :modelValue="formData" :rules="rules" label-position="top">
			<uni-forms-item label="用户名" name="username" required>
			  <uni-easyinput trim="all" v-model="formData.username" placeholder="请输入用户名" />
			</uni-forms-item>
			<uni-forms-item label="密码" name="password" required>
			  <uni-easyinput
				trim="all"
				v-model="formData.password"
				:passwordIcon="false"
				type="password"
				placeholder="请输入密码"
			  />
			</uni-forms-item>
			<uni-forms-item label="确认密码" name="secondPassword" required>
			  <uni-easyinput
				trim="all"
				v-model="formData.secondPassword"
				:passwordIcon="false"
				type="password"
				placeholder="请确认密码"
			  />
			</uni-forms-item>
			<!-- <uni-forms-item label="联系电话" name="mobile" required>
			  <uni-easyinput trim="all" v-model="formData.mobile" placeholder="请输入联系电话" />
			</uni-forms-item> -->
			<!-- <uni-forms-item label="所辖城市" name="cityid" required>
			  <view class="input-value input-value-border" @click="focusHandle('popupCity')">
				<text class="selected-area placeholder">
				  <text v-if="!cityName">请选择城市</text>
				  <text v-else class="city-name">{{ cityName }}</text>
				</text>
				<view style="margin-right: 5px">
				  <uni-icons type="down" color="#999" size="15"></uni-icons>
				</view>
			  </view>
			  <uv-popup ref="popupCity" mode="bottom" round="16" :closeOnClickOverlay="false">
				<view class="popup-content" style="height: 400px; border-radius: 15px">
				  <view class="dialog-caption">
					<view class="title-area">
					  <text class="dialog-title">请选择城市</text>
					</view>
					<view class="dialog-close" @click="closeCity('popupCity')">
					  <uni-icons type="closeempty" color="#666" size="20"></uni-icons>
					</view>
				  </view>
				  <view class="uni-data-pickerview picker-view">
					<view class="selected-list">
					  <view class="selected-item selected-item-active">
						<text>请选择</text>
					  </view>
					</view>
					<view class="tab-c">
					  <view class="list">
						<scroll-view scroll-y style="height: 100%; width: 100%">
						  <view
							class="item"
							v-for="item in cities"
							:key="item.site_id"
							@click="selectCity(item)"
						  >
							<text class="item-text">{{ item.desc }}</text>
							<uni-icons
							  v-if="item.checked"
							  type="checkmarkempty"
							  color="#007aff"
							  size="18"
							></uni-icons>
						  </view>
						</scroll-view>
					  </view>
					</view>
				  </view>
				</view>
			  </uv-popup>
			</uni-forms-item> -->
			<view class="">
			  <uv-button
				type="primary"
				:text="`${isNew ? '提交' : '更新'}`"
				@click="save"
			  ></uv-button>
			</view>
		  </uni-forms>
		</view>
	  </uv-popup>
	</view>
  </template>
  
  <script setup>
    import {shallowRef, ref, reactive, computed} from 'vue'
	import navbar from '@/components/navbar.vue'
	import pagination from '@/components/pagination.vue'
	import {onLoad} from "@dcloudio/uni-app";
  	import { getCurrentInstance } from 'vue'

	const { appContext } = getCurrentInstance()
	const REQUEST = appContext.config.globalProperties.$http


	const formRef = shallowRef()
	const popupRef = shallowRef()
	const popupCity = shallowRef()
	const pageInfo = ref({
	  total: 0,
	  per_page: 0,
	  last_page: 0,
	  current_page: 1
	})
	const key = ref('')
	const oldPassword = ref('')
	const isNew = ref(true)
	const citiesMap = new Map()
	const cities = ref([])
	const list = ref([])
	const formData = ref({
	  username: '',
	  password: '',
	  secondPassword: '', // 二次确认
	  cityid: [],
	  ischangepass: '' // 是否修改密码 add 1 edit 0
	})
	const rules = reactive({
	  username: {
		rules: [
		  {
			required: true,
			errorMessage: '请输入账号'
		  }
		]
	  },
	  password: {
		rules: [
		  {
			required: true,
			errorMessage: '请输入密码'
		  },
		  {
			pattern: '^[^\u4e00-\u9fff]+$',
			errorMessage: '密码不能是中文'
		  }
		]
	  },
	  secondPassword: {
		rules: [
		  {
			required: true,
			errorMessage: '请确认密码'
		  },
		  {
			validateFunction: function (rule, value, data, callback) {
			  if (!/^[^\u4e00-\u9fff]+$/.test(value)) {
				callback('密码不能是中文')
			  } else if (value !== data.password) {
				callback('两次密码输入不一致')
			  }
			}
		  }
		]
	  },
	  mobile: {
		rules: [
		  {
			required: true,
			errorMessage: '请输入联系电话'
		  },
		  {
			pattern: '^[1][3,4,5,6,7,8,9][0-9]{9}$',
			errorMessage: '请输入正确的11位电话'
		  }
		]
	  },
	  cityid: {
		rules: [
		  {
			required: true,
			errorMessage: '请选择城市'
		  }
		]
	  }
	})
  
	const cityName = computed(() => {
	  const city = cities.value.filter((item) => item.checked).map((item) => item.desc)
	  return city.toString()
	})
  
	const gettechMasterList = () => {
		REQUEST.http("masterchannel/index/list", {
			key: key.value
		}, "POST").then(res=>{
			list.value = res.data
		})
	}
  
	const addTech = () => {
	  popupRef.value.open()
	}
  
	const selectCity = (val) => {
	  if (val.checked) {
		val.checked = false
		formData.value.cityid = formData.value.cityid.filter((item) => item.checked)
	  } else {
		formData.value.cityid.push(val.site_id)
		val.checked = true
	  }
	}
	const focusHandle = () => {
	  popupCity.value.open()
	}
	const closeCity = () => {
	  popupCity.value.close()
	}
	const changePage = (val) => {
	  formData.value.current_page = val
	  list.value = []
	  gettechMasterList()
	}
  
	const maskClick = () => {
	  cities.value.forEach((item) => {
		item.checked = false
	  })
	  formData.value = {
		username: '',
		password: '',
		secondPassword: '',
		cityid: [],
		realname: 0,
		mobile: '',
		ischangepass: ''
	  }
	  isNew.value = true
	}
  
	const viewedit = (item) => {
	  isNew.value = false
	  oldPassword.value = item.password
	  popupRef.value.open()
	  formData.value = {
		id: item.id,
		username: item.username,
		realname: item.realname,
		mobile: item.mobile
	  }
	}
  
	const save = () => {
	  formRef.value
		.validate()
		.then((res) => {
			REQUEST.http("masterchannel/index/edit", {
				username: formData.value.username,
				password: formData.value.password,
				cids: "0,1,2",
				id: formData.value.id,
			}, "POST").then(res=>{
				popupRef.value.close()
				gettechMasterList()
			})
		})
		.catch((err) => {
		  console.log('表单错误信息：', err)
		})
	}
	
	const searchUserList = ()=> {
		gettechMasterList()
	}

	onLoad(()=>{
		gettechMasterList()
	})
  </script>
  
  <style lang="scss" scoped>
	@import './user.scss';
  </style>
  